<template>
	<view class="wrap">
		<view class="health-top">
			<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :center="true" name="3" multiple
				:maxCount="1" width="250" height="150" useBeforeRead="true">
				<image :src="healthUrl" mode="widthFix"></image>
			</u-upload>
			<text class="txt">{{tips}}</text>
		</view>
		<view class="status-wrap">
			<view class="title">
				我的健康证信息
			</view>
			<view class="item">
				<view class="left">
					健康证状态：
				</view>
				<view class="right">
					{{healthInfo.verified==1?'已核验':'未核验'}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					核验结果：
				</view>
				<view class="right">
					{{healthInfo.approved==1?'已通过':'未通过'}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					剩余有效天数：
				</view>
				<view class="right">
					{{healthInfo.valid_days?healthInfo.valid_days:'0'}} 天
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		request,
		requestData
	} from '@/utils/http.js';
	export default {
		data() {
			return {
				fileList: [],
				healthUrl: require('@/static/img/health-default.png'),
				healthInfo: '',
				tips: "点击上传健康证",
			}
		},
		mounted() {
			this.getHealthInfo()
		},
		methods: {
			//初始获取健康证
			getHealthInfo() {
				request("/user/health/info/get").then(res => {
					console.log(res);
					this.healthUrl = res?.datas?.image_url;
					this.healthInfo = res?.datas;
					this.tips = '点击更新健康证';
				}).catch(err => {
					console.log(err)
				})
			},

			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.getFileSystemManager().readFile({
						filePath: url,
						encoding: 'base64',
						success: (data) => {
							let str = data.data;
							resolve(str)
						},
						fail: (err) => {
							uni.showToast({
								title: JSON.stringify(err),
								duration: 200000
							});
						}
					});
				})
			},


			uploadFn(str) {
				return new Promise((resolve, reject) => {
					request("/user/health/base64image/upload", {
						"user_id": uni.getStorageSync('user_id'),
						"image_base64": str,
						"image_ext": 'jpeg'
					}).then(res => {
						console.log(res)
						uni.showToast({
							title: '上传成功！',
							icon: 'success',
						});


						resolve(res)
					}).catch(err => {
						reject(err)
					})
				})

			},

			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let data = await this.uploadFn(result)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: data?.datas?.url
					}))
					fileListLen++
				}
			},


			// 删除图片
			deletePic(event) {
				console.log(event);
				this.fileList.splice(event.index, 1)
			},



		}

	}
</script>
<style lang="scss" scoped>
	.wrap {
		margin: 0;
		padding: 0;
	}

	.health-top {
		width: 100%;
		height: auto;
		padding: 20rpx;
		margin-top: 30rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;

		.u-upload {
			padding: 20rpx;
			box-sizing: border-box;
		}

		image {
			width: 300rpx;
			height: auto;
		}

		.txt {
			font-size: 28rpx;
			color: $global-color-golden;
			margin-top: 40rpx;
		}
	}

	.status-wrap {
		margin-top: 60rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 20rpx;
			position: relative;
			padding-left: 13px;
			margin: 24px 0;
		}

		.title:before {
			content: "";
			background-color: #d5ad57;
			width: 7rpx;
			height: 40rpx;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -8px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}

		.item {
			background: #fff;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #f5f5f0;
			padding: 0 20rpx;
			font-size: 32rpx;
			margin-bottom: 20rpx;
		}
	}
</style>